<template>
    <!-- 底部导航 -->
    <van-goods-action class="footerbtns"  >
        <van-goods-action-button  color="#f7f8fa" class="searchbtn" style=""   @click="publishcom" text="发表评论..." />
        <template v-if="type=='c'">
             <!-- 未点赞 -->
            <van-goods-action-icon v-show="!detaile.is_liking" icon="like-o" text="点赞" @click="like" color="rgb(131,129,143)"/>
            <!-- 已点赞 -->
            <van-goods-action-icon v-show="detaile.is_liking" icon="like" text="取消点赞" @click="like" color="rgb(252,102,39)"/>
        </template>
        <template v-else>
            <van-goods-action-icon icon="chat-o" text="评论" @click="gotocomment" :badge="detaile.comm_count" color="rgb(131,129,143)" />
            <!-- 未点赞 -->
            <van-goods-action-icon v-show="detaile.attitude==-1" icon="like-o" text="点赞" @click="like" color="rgb(131,129,143)"/>
            <!-- 已点赞 -->
            <van-goods-action-icon v-show="detaile.attitude==1" icon="like" text="取消点赞" @click="like" color="rgb(252,102,39)"/>
            <!-- 未关注 -->
            <van-goods-action-icon v-show="!detaile.is_collected" icon="star-o" text="收藏" @click="collections" color="rgb(131,129,143)" />
            <!-- 已关注 -->
            <van-goods-action-icon v-show="detaile.is_collected" icon="star" text="已收藏" @click="collections" color="rgb(252,102,39)" />
            <!-- 分享按钮 -->
            <van-goods-action-icon  icon="share-o" @click="showSharefun"  text="分享" color="rgb(131,129,143)" />
        </template>
        
    </van-goods-action>
</template>

<script>
import {
    likearcitle,
    caclelikearcitle,
    commentlikings,
    commentdellikings,
    collections,
    caclecollections
}from '@/api/article'

export default {
    name:'footernags',
    components: {

    },
    props: {
        detaile:{
            type:Object,
            default:''
        },
        artid:{
            required:true,
            type:String
        },
        type:{
            type:String,
            required:true,
            default:'a'
        }
    },
    data() {
        return {
            
        };
    },
    watch: {},
    computed: {},
    methods: {
        publishcom(){
            this.$emit('publishcom')
        },
        showSharefun(){
            this.$emit('showSharefun')
        },
        async like(){
            try{
                // attitude态度 -1无态度，1喜欢，0不喜欢（不确定）
                // 对文章点赞
                if(this.type=='a'){
                    if(this.detaile.attitude==-1){
                        const {data}= await likearcitle(this.artid);
                        if(data.message=='OK'){
                            this.$toast('点赞成功！')
                            this.detaile.attitude=1
                        }else{
                            this.$toast('系统错误')
                        }
                    }else if(this.detaile.attitude==1){
                        const {status}= await caclelikearcitle(this.artid);
                        if(status=='204'){
                            this.$toast('取消点赞成功！')
                            this.detaile.attitude=-1
                        }else{
                            this.$toast('系统错误')
                        }
                    }
                    
                }else if(this.type=='c'){
                    // 对评论点赞
                    if(!this.detaile.is_liking){
                        const {data}= await commentlikings({target:this.artid});
                        if(data.message=='OK'){
                            this.$toast('点赞成功！')
                            this.detaile.like_count+=1
                        }else{
                            this.$toast('系统错误')
                        }
                    }else if(this.detaile.is_liking){
                        const {status}= await commentdellikings(this.artid);
                        if(status=='204'){
                            this.$toast('取消点赞成功！')
                            this.detaile.like_count-=1
                        }else{
                            this.$toast('系统错误')
                        }
                    }
                    this.detaile.is_liking=!this.detaile.is_liking

                }
            }catch(err){
                console.log(err)
                this.$toast('操作失败')
            }
        },
        async  collections(){
            console.log(this.detaile)
            try{
                if(this.detaile.is_collected){
                    const {status}=await caclecollections(this.artid);
                    if(status=='204'){
                        this.$toast('取消收藏成功！')
                        this.detaile.is_collected=false
                    }else{
                        this.$toast('系统错误')
                    }
                }else{
                    const {data}= await collections(this.artid);
                    console.log(data)
                    if(data.message=='OK'){
                        this.$toast('收藏成功！')
                        this.detaile.is_collected=true
                    }
                }  
            }catch(err){
                this.$toast('操作失败')
            }
        },
        gotocomment(){
            document.getElementById('ping').scrollIntoView({
                behavior: "smooth",  // 平滑过渡
                block:"start"  // 上边框与视窗顶部平齐。默认值
            })
        },
    },
    created() {console.log(this.detaile)},
    mounted() {}
};
</script>
<style lang="less" scoped>
.searchbtn{color:#ccc !important;max-width:70%}
.van-button::before{
    background-color:transparent!important;
}
.footerbtns{
    // z-index:9999;
    justify-content: space-around;
}
</style>